<!DOCTYPE html>
<html>

<head>
  <title>创建文章</title>
  {{template "admin/html-head.html"}}
  <link rel="stylesheet" href="/static/plugins/editor.md-master/css/editormd.css">
</head>

<body class="hold-transition skin-blue sidebar-mini">
  <div class="wrapper">

    <!-- Main Header -->
    {{template "admin/html-header.html"}}
    <!-- Left side column. contains the logo and sidebar -->
    {{template "admin/html-aside.html"}}

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          编辑文章
          <small>Advanced form element</small>
        </h1>
        <ol class="breadcrumb">
          <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
          <li><a href="#">Forms</a></li>
          <li class="active">Editors</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">
        <div class="row">
          <div class="col-md-12">
            <div class="box">
              <div class="box-header">
                <h3 class="box-title">Editor.md
                  <small>markdown编辑器</small>
                </h3>
              </div>
              <!-- /.box-header -->
              <div class="box-body pad">
                <form role="form">
                  <div class="form-group">
                    <label for="art_title">标题</label>
                    <input type="text" class="form-control" id="art_title" placeholder="title">
                  </div>
                  <div class="form-group">
                    <label for="art_content">内容</label>
                    <div id="art_div">
                      <textarea class="textarea" id="art_content" placeholder="Place some text here" style="display:none;"></textarea>
                    </div>
                  </div>
                </form>
                <div class="box-footer">
                  <button type="submit" class="btn btn-primary J-submit">Submit</button>
                </div>
              </div>
            </div>
          </div>
          <!-- /.col-->
        </div>
        <!-- ./row -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
      <div class="pull-right hidden-xs">
        <b>Version</b> 2.4.0
      </div>
      <strong>Copyright &copy; 2014-2016 <a href="#">Almsaeed Studio</a>.</strong> All rights
      reserved.
    </footer>

    <!-- Control Sidebar -->
    {{template "admin/html-control-sidebar.html"}}
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
  </div>
  <!-- ./wrapper -->
  <!-- REQUIRED JS SCRIPTS -->
  {{template "admin/html-js.html"}}
  <!-- Bootstrap WYSIHTML5 -->
  <script src="../../static/plugins/editor.md-master/editormd.min.js"></script>
  <!-- /REQUIRED JS SCRIPTS -->

  <!-- page script -->
  <script type="text/javascript">
    var testEditor;
    $(function () {
      mdtestEditor = editormd("art_div", {
        width: "100%",
        height: 500,
        syncScrolling: "single",
        path: "/static/plugins/editor.md-master/lib/",
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/admin/uploadImg",//上传图片接口
        /*
        上传的后台只需要返回一个 JSON 数据，结构如下：
        {
        success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
        message : "提示的信息，上传成功或上传失败及错误信息等。",
        url     : "图片地址"        // 上传成功时才返回
        }
        */

      });
      mdtestEditor.setToolbarAutoFixed(false);

      $(".J-submit").on("click", function () {
        var title = $("#art_title").val();
        var content = $("#art_content").val();
        $.post("/admin/article", { title: title, content: content }, function (result) {
          if (result.code == 0) {
            // layer.msg("新建成功！", { icon: 6 });
            location.href = "/admin/articles-route"
          } else {
            layer.msg("新建失败！" + result.msg, { icon: 5 });
          }
        }, "json");
      })
    });
  </script>
</body>

</html>